<template>
  <div id="app">
    <vue-crud
      :data="data"
      :columns="columns"
      selection-row
      :handle-row="handleRowOptions"
      :page-options="pageOptions"
      :view-form-options="viewFormOptions"
      :fetch-data="fetchData"
      :fetch-create="fetchCreate"
      :fetch-edit="fetchEdit"
      :fetch-remove="fetchRemove"
      :fetch-batch-remove="fetchBatchRemove"
    ></vue-crud>
    <!-- selection-row: 是否显示选择列 -->
    <!-- handle-row：是否显示操作列、操作列配置 -->
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'App',
  data () {
    return {
      roleDictList: Object.freeze([
        { label: '普通用户', value: 'ROLE_USER' },
        { label: '管理员', value: 'ROLE_ADMIN' },
        { label: '运营', value: 'ROLE_OP' }
      ]),
      genderDictList: Object.freeze([
        { label: '男', value: '1' },
        { label: '女', value: '2' },
        { label: '保密', value: '3' }
      ]),
      statusDictList: Object.freeze([
        { label: '正常', value: 1 },
        { label: '禁用', value: 2 }
      ]),
      originalData: [
        {
          id: 13,
          name: '百里守约',
          account: 'bailishouyue',
          phone: '18800008813',
          mail: 'bailishouyue@mail.com',
          role: 'ROLE_USER',
          gender: '1',
          status: 1,
          createTime: '2020-01-14 12:44:32',
          desc: '无父无母的两个孩子，就这样顽强生活在长城之畔的镇子上。少年带着弟弟，以作零工为生。关市开启是人们最快活的日子，四面八方的商人和货物汇集着。少年穿梭其中，眼明手快，笑脸迎人，商人们也乐意关照他，慷慨给出更多赏金。闲暇时候，哥哥会将弟弟寄托到好心邻家，只身外出狩猎。他熟悉远近所有水草丰茂之地，无论野羚抑或大雁，最终都变成猎物满载而归。'
        },
        {
          id: 12,
          name: '嫦娥',
          account: 'change',
          phone: '18800008812',
          mail: 'change@mail.com',
          role: 'ROLE_USER',
          gender: '2',
          status: 1,
          createTime: '2020-01-13 12:11:54',
          desc: '魔道一族乃是神的实验失败品，早期，他们与大陆的原生物种魔种共同劳作。北境严寒，但必须无休止的工作，日之塔才能亮起，为倒悬都市打上那束耀眼的长光。'
        },
        {
          id: 11,
          name: '瑶',
          account: 'yao',
          phone: '18800008811',
          mail: 'yao@mail.com',
          role: 'ROLE_USER',
          gender: '2',
          status: 1,
          createTime: '2020-01-12 11:32:23',
          desc: '鹿女阿瑶年幼时不小心闯入东神之城的边缘地带，受到那里村民的围攻。村民想杀掉她，同供品一起献祭给东神。东神使者云中君放她离去。'
        },
        {
          id: 10,
          name: '云中君',
          account: 'yunzhongjun',
          phone: '18800008810',
          mail: 'yunzhongjun@mail.com',
          role: 'ROLE_USER',
          gender: '1',
          status: 1,
          createTime: '2020-01-11 14:12:18',
          desc: '云中君曾是一只孤鸟，与一只鹿结伴生存。在楚汉战火燃烧至云梦泽森林的时候，小鹿中箭死去，不久，悲伤至极的它将身躯粉碎在峭壁岩石。目睹这一幕的鬼谷子心怀同情，将其尸身骸骨运用转生之术重造，新生命具有人类的大部分形态，但可化作鸟类飞翔与战斗。'
        },
        {
          id: 9,
          name: '曜',
          account: 'yao',
          phone: '18800008809',
          mail: 'yao@mail.com',
          role: 'ROLE_USER',
          gender: '1',
          status: 1,
          createTime: '2020-01-10 09:15:38',
          desc: '曜是一个从小怀抱英雄梦想的热血少年，与冷静强大的姐姐镜激烈的争夺着所有比赛的第一。尽管天性不同，但他们都到了稷下学习，渴望在这座象征着王者大陆最高智慧的学府中获得成长。'
        },
        {
          id: 8,
          name: '马超',
          account: 'maochao',
          phone: '18800008808',
          mail: 'maochao@mail.com',
          role: 'ROLE_USER',
          gender: '1',
          status: 1,
          createTime: '2020-01-09 11:31:11',
          desc: '马超是一名冷静利落的战士。他本是西凉少寨主之一。他的父亲卷进武都战略、挑起同族相残。少寨主们本共同立誓维护西凉和平，却最终纷纷倒在刀尖之下，马超也被父亲关押。在族中长老帮助下，他连夜逃出，带着牺牲兄弟的遗物——四把冷晖枪，流落异乡。'
        },
        {
          id: 7,
          name: '西施',
          account: 'xishi',
          phone: '18800008807',
          mail: 'xishi@mail.com',
          role: 'ROLE_USER',
          gender: '2',
          status: 1,
          createTime: '2020-01-08 12:32:11',
          desc: '无主之地并非无忧童年的乐土，西施自小学会了各种谋生的小把戏。但她童年首次倒卖捡来的宝贝，就意外欠下了一大笔债务。在躲避追赶时，她闯进了女神的古祠堂，并带出来一条富有魔力的轻纱。'
        },
        {
          id: 6,
          name: '鲁班大师',
          account: 'lubandashi',
          phone: '18800008806',
          mail: 'lubandashi@mail.com',
          role: 'ROLE_USER',
          gender: '2',
          status: 1,
          createTime: '2020-01-07 12:43:26',
          desc: '无主之地并非无忧童年的乐土，西施自小学会了各种谋生的小把戏。但她童年首次倒卖捡来的宝贝，就意外欠下了一大笔债务。在躲避追赶时，她闯进了女神的古祠堂，并带出来一条富有魔力的轻纱。'
        },
        {
          id: 5,
          name: '蒙犽',
          account: 'mengya',
          phone: '18800008805',
          mail: 'mengya@mail.com',
          role: 'ROLE_USER',
          gender: '1',
          status: 1,
          createTime: '2020-01-06 21:12:12',
          desc: '在将军府邸中长大的少年蒙犽，自幼熟读兵书，但往往有着别出心裁的解读，幼时偶遇的机关大师，更是启迪了他对机关武器的热情和天赋，令他在传统兵法之上，创新出各种另辟蹊径的战术。'
        },
        {
          id: 4,
          name: '镜',
          account: 'jing',
          phone: '18800008804',
          mail: 'jing@mail.com',
          role: 'ROLE_USER',
          gender: '1',
          status: 1,
          createTime: '2020-01-05 23:34:45',
          desc: '镜出身在古老的神职者家族，从小接受系统严格的训练。她的父母在任务中意外失踪，留下了潜伏暗处的敌人和年幼无知的弟弟。一夜之间，家族的使命和长姐的责任落在镜的身上。为此，她抱着弟弟远走他乡，并抹去了家族的所有信息。'
        },
        {
          id: 3,
          name: '蒙恬',
          account: 'mengtian',
          phone: '18800008803',
          mail: 'mengtian@mail.com',
          role: 'ROLE_USER',
          gender: '1',
          status: 1,
          createTime: '2020-01-04 06:12:32',
          desc: '旧玄雍物产匮乏，纷争不断，百姓生活十分艰苦，出生于名将世家的蒙恬因对民众苦难的同情，梦想有朝一日能重振国家，使百姓免于苦难。他自幼勤修武道，苦读兵法，希望能尽早实现自己的人生追求。'
        },
        {
          id: 2,
          name: '阿古朵',
          account: 'aguduo',
          phone: '18800008802',
          mail: 'aguduo@mail.com',
          role: 'ROLE_USER',
          gender: '2',
          status: 1,
          createTime: '2020-01-03 11:23:32',
          desc: '野性率真的山孩阿古朵，和她最好的朋友巨兽球球，是三分之地战场上破坏力惊人的生力军。从幼年开始的密林生活让她善用植物的特性，并通晓与野兽的相处之道。她总是出其不意的在战场各处弹射出令人惊奇的种子弹药，同时，只要她一声令下，那些被她帮助过的动物们就会一拥而上，让他们见识见识大山的力量。'
        },
        {
          id: 1,
          name: '夏洛特',
          account: 'xialuote',
          phone: '18800008801',
          mail: 'xialuote@mail.com',
          role: 'ROLE_USER',
          gender: '1',
          status: 1,
          createTime: '2020-01-02 12:01:20',
          desc: '夏洛特是日落海久负盛名的贵族家族中，最为优秀的继承者。她以精湛无匹的剑术，在过往所有贵族间的战斗中，毫无悬念地赢取胜利，并将火焰样的红玫瑰留给败者，作为优雅的结束礼。'
        }
      ],
      data: [],
      columns: [
        {
          title: '姓名',
          key: 'name',
          width: 140,
          sortable: 'custom',
          form: { // 表单通用配置
            component: { // 表单配置
              name: 'Input' // 组件类型
              // 组件props
            },
            formItem: {
              rules: [ // 添加表单校验，查询表单默认不进行校验
                {
                  required: true,
                  trigger: 'blur',
                  message: '请输入用户姓名'
                }
              ]
            }
          }
        },
        {
          title: '登录账号',
          key: 'account',
          width: 120,
          sortable: 'custom',
          form: {
            component: {
              name: 'Input'
            },
            formItem: { // FormItem组件props
              rules: [
                {
                  required: true,
                  trigger: 'blur',
                  message: '请输入登录账号'
                }
              ]
            }
          }
        },
        {
          title: '手机号',
          key: 'phone',
          width: 130,
          form: {
            component: {
              name: 'Input'
            },
            formItem: {
              rules: [
                {
                  required: true,
                  trigger: 'blur',
                  message: '请输入手机号'
                },
                {
                  len: 11,
                  trigger: 'blur',
                  message: '请输入正确的手机号'
                }
              ]
            }
          },
          searchForm: { // 搜索表单配置
            show: false // 默认为true
          }
        },
        {
          title: '邮箱',
          key: 'mail',
          width: 200,
          form: {
            component: {
              name: 'Input'
            },
            formItem: {
              rules: [
                {
                  required: true,
                  trigger: 'blur',
                  message: '请输入邮箱'
                },
                {
                  type: 'email',
                  trigger: 'blur',
                  message: '请输入正确的邮箱'
                }
              ]
            }
          },
          searchForm: { // 搜索表单配置
            show: false // 默认为true
          }
        },
        {
          title: '角色',
          key: 'role',
          width: 200,
          align: 'center',
          formatTxt: (val) => {
            const role = this.roleDictList.find(item => val === item.value)
            return role ? role.label : ''
          },
          form: {
            component: {
              name: 'Select'
            },
            formItem: {
              rules: [
                {
                  required: true,
                  trigger: 'change',
                  message: '请选择用户角色'
                }
              ]
            }
          },
          addForm: { // 新增表单配置
            initValue: 'ROLE_USER' // 初始值
          },
          searchForm: { // 搜索表单配置
            show: false // 默认为true
          },
          dictData: [
            { label: '普通用户', value: 'ROLE_USER' },
            { label: '管理员', value: 'ROLE_ADMIN' },
            { label: '运营', value: 'ROLE_OP' }
          ]
        },
        {
          title: '性别',
          key: 'gender',
          width: 100,
          align: 'center',
          formatTxt: (val) => {
            const gender = this.genderDictList.find(item => val === item.value)
            return gender ? gender.label : ''
          },
          form: {
            component: {
              name: 'Radio'
            }
          },
          addForm: {
            initValue: '3'
          },
          dictData: [
            { label: '男', value: '1' },
            { label: '女', value: '2' },
            { label: '保密', value: '3' }
          ]
        },
        {
          title: '状态',
          key: 'status',
          width: 100,
          align: 'center',
          formatTxt: (val) => {
            const status = this.statusDictList.find(item => val === item.value)
            return status ? status.label : ''
          },
          form: {
            component: {
              name: 'Radio'
            }
          },
          addForm: {
            initValue: 1
          },
          searchForm: { // 搜索表单配置
            show: false // 默认为true
          },
          dictData: [
            { label: '正常', value: 1 },
            { label: '禁用', value: 2 }
          ]
        },
        {
          title: '创建时间',
          key: 'createTime',
          width: 170,
          sortable: 'custom',
          sortType: 'desc',
          form: {
            component: {
              name: 'DatePicker',
              type: 'datetime',
              format: 'yyyy-MM-dd HH:mm:ss'
            }
          },
          addForm: {
            show: false // 是否在新增表单中显示
          },
          searchForm: { // 搜索表单配置
            show: false // 默认为true
          }
        },
        {
          title: 'ID',
          key: 'id',
          width: 120,
          form: {
            component: {
              name: 'Input',
              disabled: true
            }
          },
          addForm: {
            show: false
          },
          searchForm: { // 搜索表单配置
            show: false // 默认为true
          }
        },
        {
          title: '个人介绍',
          key: 'desc',
          width: 140,
          show: false, // 是否显示该列
          tooltip: true,
          form: {
            component: {
              name: 'Input',
              type: 'textarea',
              autosize: {
                minRows: 3
              }
            }
          },
          addForm: {
            show: true,
            grid: { // 表单栅格位置
              span: 24
            }
          },
          searchForm: { // 搜索表单配置
            show: false // 默认为true
          }
        }
      ],
      handleRowOptions: {
        fixed: 'right'
      },
      pageOptions: {
        align: 'center', // 分页组件对齐方式
        total: 0,
        pageSize: 10,
        showSizer: true,
        showTotal: true
      },
      viewFormOptions: {
        type: 'Drawer'
      }
    }
  },
  methods: {
    fetchData ({ currentPage, pageSize, sortColumn, sortType, search }) {
      console.log(currentPage, pageSize, sortColumn, sortType, search)
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          let allData = [...this.originalData]
          for (const key in search) {
            if (search[key]) {
              allData = allData.filter(item => item[key] && item[key].includes(search[key]))
            }
          }
          const offset = (currentPage - 1) * pageSize
          this.data = allData.slice(offset, offset + pageSize)
          this.pageOptions.total = allData.length
          resolve()
        }, 2000)
      })
    },
    fetchCreate (params) {
      return new Promise(resolve => {
        const id = this.originalData.length + 1
        const createTime = moment().format('YYYY-MM-DD HH:mm:ss')
        this.originalData.unshift({ ...params, id, createTime })
        setTimeout(() => {
          resolve()
        }, 2000)
      })
    },
    fetchEdit (editedParams, fullParams) {
      console.log(editedParams, fullParams)
      return new Promise(resolve => {
        const index = this.originalData.findIndex(item => item.id === fullParams.id)
        const currentData = { ...fullParams, ...editedParams }
        this.originalData.splice(index, 1, currentData)
        setTimeout(() => {
          resolve()
        }, 2000)
      })
    },
    fetchRemove (row) {
      return new Promise(resolve => {
        const index = this.originalData.findIndex(item => item.id === row.id)
        this.originalData.splice(index, 1)
        setTimeout(() => {
          resolve()
        })
      })
    },
    fetchBatchRemove (selectedData) {
      return new Promise(resolve => {
        selectedData.forEach(data => {
          const index = this.originalData.findIndex(item => item.id === data.id)
          this.originalData.splice(index, 1)
        })
        setTimeout(() => {
          resolve()
        })
      })
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 10px;
}
</style>
